<template>
	<view>
		<uni-search-bar @focus="toSearch"></uni-search-bar>
		<my-swiper :imageList="imageList" height="200px"></my-swiper>
		<view class="cart">
			<view class="title">小百科</view>
			<view class="list-item" v-for="(item, index) in xbkList" :key="index">
				<image :src="item.image" mode="" style="width: 100%; height: 100%;"></image>
				<view class="text">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import { onReachBottom } from '@dcloudio/uni-app'
	const imageList = ref([
		"../../static/images/banner1.webp",
		"../../static/images/banner2.webp",
		"../../static/images/banner3.webp",
		"../../static/images/banner4.webp",
	])
	const xbkList = ref([]);
	
	const getXbk = async () => {
		const resp = await  uniCloud.callFunction({
			name: 'getXbk',
		})
		console.log(resp)
		xbkList.value = resp.result.data
	}
	
	const toSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	
	onReachBottom(() => {
		uni.showLoading({
			title: '数据加载中...'
		})
	})
	
	getXbk()
</script>

<style lang="scss">
.list-item {
	height: 400rpx;
	margin: 10rpx 0;
	padding: 10rpx;
	position: relative;
	.text {
		position: absolute;
		bottom: 0;
	}
}
</style>